<script setup lang="ts" generic="T extends Record<string, any> = Record<string, any>">

import type ProcessedFormItem from "@/components/form/type/ProcessedFormItem.ts";
import TInput from "@/components/input/index.vue";

const $prop = defineProps<{ item: ProcessedFormItem<T>, model: T, labelWidth: number }>()

</script>

<template>
  <div class="form-item">
    <!-- 文本输入框 -->
    <template v-if="item.type === 'input'">
      <t-input class="form-item-main"
               v-model="(model[item.key as keyof typeof model] as string | number | null | undefined)"
               :label="item.label" :labelWidth="labelWidth" type="text"
               :rules="item.rules" :useRules="item.useRules"
               :placeholder="item.placeholder ?? item.label" :required="item.required" :disabled="item.disabled"
               v-on="item.event ?? {}" v-bind="item.attr"/>
    </template>

    <template v-else-if="item.type === 'number'">
      <!-- 数字输入框 -->
      <t-input class="form-item-main"
               v-model="(model[item.key as keyof typeof model] as string | number | null | undefined)"
               :label="item.label" :labelWidth="labelWidth" type="number"
               :rules="item.rules" :useRules="item.useRules"
               :placeholder="item.placeholder ?? item.label" :required="item.required" :disabled="item.disabled"
               v-on="item.event ?? {}" v-bind="item.attr"/>
    </template>

    <template v-else-if="item.type === 'password'">
      <!-- 密码输入框 -->
      <t-input class="form-item-main"
               v-model="(model[item.key as keyof typeof model] as string | number | null | undefined)"
               :label="item.label" :labelWidth="labelWidth" type="password"
               :rules="item.rules" :useRules="item.useRules"
               :placeholder="item.placeholder ?? item.label" :required="item.required" :disabled="item.disabled"
               v-on="item.event ?? {}" v-bind="item.attr"/>
    </template>

    <template v-else-if="item.type === 'textarea'">
      <!-- 文本域输入框 -->
      <t-input class="form-item-main"
               v-model="(model[item.key as keyof typeof model] as string | number | null | undefined)"
               :label="item.label" :labelWidth="labelWidth" type="textarea"
               :rules="item.rules" :useRules="item.useRules"
               :placeholder="item.placeholder ?? item.label" :required="item.required" :disabled="item.disabled"
               v-on="item.event ?? {}" v-bind="item.attr"/>
    </template>

    <template v-else-if="item.type === 'switch'">
      <!-- 开关 -->
      <t-switch class="form-item-main" :label="item.label" :labelWidth="labelWidth"
                v-model="model[item.key as keyof typeof model]" v-on="item.event ?? {}" v-bind="item.attr"/>
    </template>

    <template v-else-if="item.type === 'select'">
      <!-- 下拉框 -->
      <t-select class="form-item-main" v-model="model[item.key as keyof typeof model]"
                     :label="item.label" :labelWidth="labelWidth"
                     :options="item.options" :placeholder="item.placeholder ?? item.label"
                     :required="item.required" :disabled="item.disabled"
                     v-on="item.event ?? {}" v-bind="item.attr"/>
    </template>

    <template v-else-if="item.type === 'radio'">

    </template>

    <template v-else-if="item.type === 'checkbox'">

    </template>

    <template v-else-if="item.type === 'slot'">
      <slot :name="item.key" :model="model" :field="item"/>
    </template>

  </div>
</template>

<style scoped>

</style>